<script setup lang="ts">
import {computed, reactive, ref} from 'vue';
import DynamicTable from './DynamicTable.vue';
import {VxeTableInstanceType} from './types';
import {message} from 'ant-design-vue';

// import {useModel} from './useModel';
// const {tableRef} = useModel();
// const props = withDefaults(defineProps<{visible: boolean; title: string; data: any}>(), {
//   visible: false,
//   title: '',
//   data: {},
// });
// const emit = defineEmits<{
//   (e: 'update:visible', value: boolean): void;
// }>();

// const visible = computed<boolean>({
//   get: () => props.visible,
//   set: (value) => {
//     emit('update:visible', value);
//   },
// });
const dynamicTableRef = ref<null | {
  tableRef: VxeTableInstanceType;
}>(null);
const visible = ref(false);

const afterOpenChange = (bool: boolean) => {
  console.log('open', bool);
};
const onModal = (value: boolean) => {
  visible.value = value;
};

const onSave = () => {
  const tempData = dynamicTableRef.value?.tableRef?.getTableData().tableData || [];
  let filterData =
    tempData?.filter((item) => {
      if (item.deadlineTime && item.calculationRuleDay) {
        return item;
      }
    }) || [];
  console.log('filterData', filterData);
  console.log('childRef', tempData);
  if (tempData.length === filterData.length) {
    message.success('验证通过');
  }
};
</script>

<template>
  <a-drawer
    v-model:open="visible"
    size="large"
    class="custom-class"
    root-class-name="root-class-name"
    :root-style="{color: 'blue'}"
    title="新增"
    placement="right"
    @after-open-change="afterOpenChange"
    @close="onModal(false)"
  >
    <DynamicTable ref="dynamicTableRef" :visible="visible" />
    <template #footer>
      <a-button style="margin-right: 8px" @click="onModal(false)">关闭</a-button>
      <a-button type="primary" @click="onSave">保存</a-button>
    </template>
  </a-drawer>
  <a-button @click="onModal(true)">动态新增Table</a-button>
</template>
